<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>校园信息网</title>
    <link rel="stylesheet" href="./css/student.css">
</head>
<body>
<h1 id="title">学生信息表</h1>
<a href="javascript:" id="showAddDialog">添加学生信息</a>
<table id="stuTable">
    <thead>
    <tr>
        <th>编号</th><th>学号</th><th>姓名</th><th>年龄</th><th>专业</th><th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<ul id="pageUl">

</ul>

<div style="text-align: center">
    总共有
    <i id="count"></i>
    条记录；
    每页显示
    <select id="pageCountSel">
        <option>3</option>
        <option>5</option>
        <option>8</option>
    </select>
    条记录；
    总共4页
</div>

<div class="dialog" id="addDialog">
    <span class="closeBt">X</span>
    <div class="top">新增学生</div>
    <div class="middle">
        <form id="addForm">
            <div>学号:<input type="text" name="stuNumber"></div>
            <div>姓名:<input type="text" name="stuName"></div>
            <div>年龄:<input type="number" name="stuAge"></div>
            <div>专业:
                <select name="stuMajor">
                    <option>计算机科学与应用</option>
                    <option>软件工程</option>
                    <option>电子信息工程</option>
                    <option>网络工程</option>
                </select>
            </div>
            <div><input type="button" id="addBt" value="确认添加"></div>
        </form>
    </div>
</div>
<div class="dialog" id="upDialog">
    <span class="closeBt">X</span>
    <div class="top">修改学生</div>
    <div class="middle">
        <form id="updateForm">
            <!-- 将id值隐藏在表单中 因为修改时需要id 但是用户不能改id -->
            <input type="hidden" name="ID">
            <div>学号:<input type="text" name="stuNumber"></div>
            <div>姓名:<input type="text" name="stuName"></div>
            <div>年龄:<input type="number" name="stuAge"></div>
            <div>专业:
                <select name="stuMajor">
                    <option>计算机科学与应用</option>
                    <option>软件工程</option>
                    <option>电子信息工程</option>
                    <option>网络工程</option>
                </select>
            </div>
            <div><input type="button" id="upBt" value="确认修改"></div>
        </form>
    </div>
</div>

<script src="js/jquery-3.6.0.js"></script>
<script src="js/student.js"></script>
</body>
</html>

